<template>
  <page-header-wrapper>
    <a-space direction="vertical">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-card
            style="width:100%"
            :bordered="false"
            :tabList="tabListNoTitleDetail"
            :activeTabKey="noTitleKeyDetail"
            @tabChange="key => handleTabChangeDetail(key, 'noTitleKeyDetail')"
          >
            <div v-if="noTitleKeyDetail === 'ddpz'">
              <div align="right">
                <a-button v-if="!onEdit" @click="toSave" type="primary" style="margin-right: 10px; border-radius: 4px;" >
                  保存
                </a-button>
                <a-button v-if="onEdit" @click="toEdit" type="primary" style="margin-right: 10px;border-radius: 4px;">
                  编辑
                </a-button>
                <a-button v-if="onEdit" @click="toRemove" type="danger" style="border-radius: 4px;" :disabled="dingTalk.dingId === undefined || dingTalk.dingId === ''">
                  删除
                </a-button>
              </div>
              <a-descriptions :column="4" layout="vertical">
                <a-descriptions-item label="应用名称">
                  <span v-if="onEdit">{{dingTalk.appName}}</span>
                  <a-input v-else v-model="dingTalk.appName" style="width: 200%;"/>
                </a-descriptions-item>
                <a-descriptions-item label="应用类型">
                  <a-badge v-if="dingTalk.appType" color="green" :text="dingTalk.appType" />
                </a-descriptions-item>
                <a-descriptions-item label="开发模式" :span="2">
                  <a-badge color="green" text="正式应用" />
                </a-descriptions-item>

                <a-descriptions-item label="AgentId">
                  <span v-if="onEdit">{{dingTalk.agentId}}</span>
                  <a-input v-else v-model="dingTalk.agentId" style="width: 200%;"/>
                </a-descriptions-item>
                <a-descriptions-item label="AppKey">
                  <span v-if="onEdit">{{dingTalk.appKey}}</span>
                  <a-input v-else v-model="dingTalk.appKey" style="width: 200%;"/>
                </a-descriptions-item>
                <a-descriptions-item label="AppSecret" :span="2">
                  <span v-if="onEdit">{{dingTalk.appSecret}}</span>
                  <a-input v-else v-model="dingTalk.appSecret" style="width: 200%;"/>
                </a-descriptions-item>

                <a-descriptions-item label="AesKey">
                  <span v-if="onEdit">{{dingTalk.aesKey}}</span>
                  <a-input v-else v-model="dingTalk.aesKey" style="width: 200%;"/>
                </a-descriptions-item>
                <a-descriptions-item label="签名令牌">
                  <span v-if="onEdit">{{dingTalk.token}}</span>
                  <a-input v-else v-model="dingTalk.token" style="width: 200%;"/>
                </a-descriptions-item>
                <a-descriptions-item label="回调地址" :span="2">
                  <span v-if="onEdit">{{dingTalk.callBackUrl}}</span>
                  <a-input v-else v-model="dingTalk.callBackUrl" style="width: 200%;"/>
                </a-descriptions-item>

                <a-descriptions-item label="激活">
                  <a-button @click="toInit" type="primary" icon="bug" style="border-radius: 4px;"
                            :disabled="onEdit === false || dingTalk.dingId === undefined || dingTalk.aesKey === null">
                    激活
                  </a-button>
                </a-descriptions-item>

                <a-descriptions-item label="状态">
                  <a-badge v-if="dingTalk.dingId !== undefined" color="green" text="正常" />
                  <a-badge v-else color="red" text="错误" />
                </a-descriptions-item>
              </a-descriptions>
            </div>
            <div v-if="noTitleKeyDetail === 'sjdy'">
              <div class="notice-detail" style="height: 100%">
                <div>
                  <div class="title-bin-sty">
                    <span>通讯录事件</span>
                  </div>
                  <a-checkbox-group
                    :options="optionsWithDisabled"
                    :default-value="['Apple2']"
                    @change="onChange"
                  >
                    <p slot="label" slot-scope="{ value }" style="color: red">{{ value }}</p>
                  </a-checkbox-group>
                </div>
                <div>
                  <div class="title-bin-sty" style="margin-top: 18px;">
                    <span>审批事件</span>
                  </div>
                  <a-checkbox-group
                    :options="optionsWithDisabledSp"
                    :default-value="['Apple2']"
                    @change="onChangeSp"
                  >
                    <p slot="label" slot-scope="{ value }" style="color: red">{{ value }}</p>
                  </a-checkbox-group>
                </div>
                <div>
                  <div class="title-bin-sty" style="margin-top: 18px;">
                    <span>群会话事件</span>
                  </div>
                  <a-checkbox-group
                    :options="optionsWithDisabledQhh"
                    :default-value="['Apple2']"
                    @change="onChangeQhh"
                  >
                    <p slot="label" slot-scope="{ value }" style="color: red">{{ value }}</p>
                  </a-checkbox-group>
                </div>
                <div>
                  <div class="title-bin-sty" style="margin-top: 18px;">
                    <span>签到事件</span>
                  </div>
                  <a-checkbox-group
                    :options="optionsWithDisabledKq"
                    :default-value="['Apple2']"
                    @change="onChangeKq"
                  >
                    <p slot="label" slot-scope="{ value }" style="color: red">{{ value }}</p>
                  </a-checkbox-group>
                </div>
                <div>
                  <div class="title-bin-sty" style="margin-top: 18px;">
                    <span>会议室事件</span>
                  </div>
                  <a-checkbox-group
                    :options="optionsWithDisabledHys"
                    :default-value="['Apple2']"
                    @change="onChangeHys"
                  >
                    <p slot="label" slot-scope="{ value }" style="color: red">{{ value }}</p>
                  </a-checkbox-group>
                </div>
                <div>
                  <div class="title-bin-sty" style="margin-top: 18px;">
                    <span>智能人事事件</span>
                  </div>
                  <a-checkbox-group
                    :options="optionsWithDisabledZnRs"
                    :default-value="['Apple2']"
                    @change="onChangeZnRs"
                  >
                    <p slot="label" slot-scope="{ value }" style="color: red">{{ value }}</p>
                  </a-checkbox-group>
                </div>
                <div>
                  <div class="title-bin-sty" style="margin-top: 18px;">
                    <span>其他事件</span>
                  </div>
                  <a-checkbox-group
                    :options="optionsWithDisabledQd"
                    :default-value="['Apple2']"
                    @change="onChangeQd"
                  >
                    <p slot="label" slot-scope="{ value }" style="color: red">{{ value }}</p>
                  </a-checkbox-group>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </page-header-wrapper>
</template>

<script>

import { getDingTalk, init, addDingTalk, updateDingTalk, delDingTalk } from '@/api/tool/dingtalk'
import {delUser} from "@/api/system/user";

const optionsWithDisabled = [
  { label: '通讯录用户增加', value: 'user_add_org' },
  { label: '通讯录用户更改', value: 'user_modify_org' },
  { label: '通讯录用户离职', value: 'user_leave_org' },
  { label: '加入企业后用户激活', value: 'user_active_org' },
  { label: '通讯录用户被设为管理员', value: 'org_admin_add' },
  { label: '通讯录用户被取消设置管理员', value: 'org_admin_remove' },
  { label: '通讯录企业部门创建', value: 'org_dept_create' },
  { label: '通讯录企业部门修改', value: 'org_dept_modify' },
  { label: '通讯录企业部门删除', value: 'org_dept_remove' },
  { label: '企业被解散', value: 'org_remove' },
  { label: '企业信息发生变更', value: 'org_change' },
  { label: '员工角色信息发生变更', value: 'label_user_change' },
  { label: '增加角色或者角色组', value: 'label_conf_add' },
  { label: '删除角色或者角色组', value: 'label_conf_del' },
  { label: '修改角色或者角色组', value: 'label_conf_modify' },
];
const optionsWithDisabledSp = [
  { label: '审批任务开始，结束，转交', value: 'bpms_task_change' },
  { label: '审批实例开始，结束', value: 'bpms_instance_change' }
];
const optionsWithDisabledQhh = [
  { label: '群会话添加人员', value: 'chat_add_member' },
  { label: '群会话删除人员', value: 'chat_remove_member' },
  { label: '群会话用户主动退群', value: 'chat_quit' },
  { label: '群会话更换群主', value: 'chat_update_owner' },
  { label: '群会话更换群名称', value: 'chat_update_title' },
  { label: '群会话解散群', value: 'chat_disband' }
];
const optionsWithDisabledQd = [
  { label: '用户签到事件', value: 'check_in' },
  { label: '用户在圈子内的访问行为', value: 'circle_user_action' },
  { label: 'CRM客户动态变更', value: 'crm_customer_track' },
  { label: '用户日程发生变更', value: 'calendar_event_change' }
];
const optionsWithDisabledKq = [
  { label: '员工打卡事件', value: 'attendance_check_record' },
  { label: '员工排班变更事件', value: 'attendance_schedule_change' },
  { label: '员工加班事件', value: 'attendance_overtime_duration' }
];
const optionsWithDisabledHys = [
  { label: '会议室预定等事件', value: 'meetingroom_book' },
  { label: '会议室创建、更新、删除等', value: 'meetingroom_room_info' }
];
const optionsWithDisabledZnRs = [
  { label: '人事档案变动等', value: 'hrm_user_record_change' },
  { label: '人事平台员工异动V2', value: 'hrm_mdm_user_change' }
];

export default {
  name: 'DingTalk',
  data () {
    return {
      onEdit: true,
      dingTalk: {
        dingId: undefined,
        appName: undefined,
        appType: undefined,
        agentId: undefined,
        appKey: undefined,
        appSecret: undefined,
        aesKey: undefined,
        token: undefined,
        callBackUrl: undefined
      },
      loading: true,
      optionsWithDisabled,
      value: [],
      optionsWithDisabledSp,
      valueSp: [],
      optionsWithDisabledQhh,
      valueQhh: [],
      optionsWithDisabledQd,
      valueQd: [],
      optionsWithDisabledKq,
      valueKq: [],
      optionsWithDisabledHys,
      valueHys: [],
      optionsWithDisabledZnRs,
      valueZnRs: [],
      tabListNoTitle: [
        {
          key: 'txlsj',
          tab: '通讯录事件'
        },
        {
          key: 'spsj',
          tab: '审批事件'
        },
        {
          key: 'qhhsj',
          tab: '群会话事件'
        },
        {
          key: 'kqsj',
          tab: '考勤事件'
        },
        {
          key: 'hyssj',
          tab: '会议室事件'
        },
        {
          key: 'znrssj',
          tab: '智能人事事件'
        },
        {
          key: 'qtsj',
          tab: '其他事件'
        }
      ],
      noTitleKey: 'txlsj',
      tabListNoTitleDetail: [
        {
          key: 'ddpz',
          tab: '钉钉配置'
        },
        {
          key: 'sjdy',
          tab: '事件订阅'
        }
      ],
      noTitleKeyDetail: 'ddpz',
    }
  },
  filters: {
  },
  created () {
    this.getDingTalk()
  },
  computed: {
  },
  watch: {
  },
  methods: {
    onChange (checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);
    },
    onChangeSp (checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.valueSp);
    },
    onChangeQhh (checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.valueQhh);
    },
    onChangeQd (checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.valueQd);
    },
    onChangeKq (checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.valueKq);
    },
    onChangeHys (checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.valueHys);
    },
    onChangeZnRs (checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.valueZnRs);
    },
    handleTabChange (key, type) {
      this[type] = key
    },
    handleTabChangeDetail (key, type) {
      this[type] = key
    },
    /** 保存 */
    toSave () {
      this.onEdit = true
      if (this.dingTalk.dingId !== undefined) {
        updateDingTalk(this.dingTalk).then(response => {
          this.getDingTalk()
          this.$message.success(
            '保存成功',
            3
          )
        })
      } else {
        addDingTalk(this.dingTalk).then(response => {
          this.getDingTalk()
          this.$message.success(
            '保存成功',
            3
          )
        })
      }
    },
    /** 编辑 */
    toEdit () {
      this.onEdit = false
    },
    /** 删除 */
    toRemove () {
      var that = this
      const dingId = this.dingTalk.dingId
      this.$confirm({
        title: '确认删除数据?',
        content: '钉钉配置 [' + this.dingTalk.appName + '] 的数据一旦清空，无法找回',
        onOk () {
          return delDingTalk(dingId)
            .then(() => {
              that.reset()
              that.getDingTalk()
              that.$message.success(
                '删除成功',
                3
              )
            })
        },
      })
    },
    /** 激活 */
    toInit () {
      init().then(response => {

      })
    },
    // 表单重置
    reset () {
      this.dingTalk = {
        dingId: undefined,
        appName: undefined,
        appType: undefined,
        agentId: undefined,
        appKey: undefined,
        appSecret: undefined,
        aesKey: undefined,
        token: undefined,
        callBackUrl: undefined
      }
    },
    /** 查询钉钉信息 */
    getDingTalk () {
      getDingTalk().then(response => {
          const res = response.data
        console.log(res)
          this.dingTalk = res
          if(this.dingTalk == undefined)
          {
            this.reset()
          }
          setTimeout(() => {
            this.loading = false
          }, 500)
        }
      )
    }
  }
}
</script>

<style>
  .edit-sty{
    border: none !important;
    background: white !important;
    color: black !important;
  }
  .save-sty{
    background: white;
    color: black;
  }
  .ant-checkbox-group-item {
    display: inline-block;
    margin-right: 8px;
    width: 220px;
    margin-top: 10px;
  }
  .ant-card-head {
    border-bottom: 0px solid #e8e8e8;
  }
  .title-bin-sty{
    font-weight: bolder;
    border-left: 5px solid #1890ff;
    padding: 0px 0px 0px 5px;
    border-radius: 0px 0px 0px 6px;
  }
</style>